<template>
  <div>
    <div class="ContentBox">
      <div class="InputBoxs">
        <el-form ref="Form" :model="FormData" label-width="20px" class="Forms" :rules="rules">
          <!-- 1 -->
          <el-form-item prop="code">
            <template>
              <div class="text required">{{ ParentData.twoPo }}</div>
              <el-input v-model="FormData.code" :placeholder="core" style="width: 233px;" :disabled="true" />
            </template>
          </el-form-item>
          <!-- 2 -->
          <el-form-item prop="warehouseId">
            <template>
              <div class="text required">{{ ParentData.onePo }}</div>
              <el-select v-model="FormData.warehouseId" placeholder="请选择" style="width: 233px;" clearable>
                <el-option v-for="(item, index) in list" :key="index" :label="index" :value="item" />
              </el-select>
            </template>
          </el-form-item>
          <!-- 3 -->
          <el-form-item prop="name">
            <template>
              <div class="text required">{{ ParentData.threePo }}</div>
              <el-input v-model="FormData.name" placeholder="请输入" style="width: 233px;" />
            </template>
          </el-form-item>
          <!-- 4 -->
          <el-form-item prop="temperatureType">
            <template>
              <div class="text required">{{ ParentData.fourPo }}</div>
              <el-select v-model="FormData.temperatureType" placeholder="请选择" style="width: 233px;" clearable>
                <el-option v-for="(item, index) in this.$store.state.PublicData.temperatureType" :key="index" :label="item" :value="index" />
              </el-select>
            </template>
          </el-form-item>
          <!-- 5 -->
          <el-form-item prop="bearingType">
            <template>
              <div class="text required">{{ ParentData.fixPo }}</div>
              <el-select v-model="FormData.bearingType" placeholder="请选择" style="width: 233px;" clearable>
                <el-option v-for="(item, index) in this.$store.state.PublicData.bearingType" :key="index" :label="item" :value="index" />
              </el-select>
            </template>
          </el-form-item>
          <!-- 7 -->
          <el-form-item prop="useType">
            <template>
              <div class="text required">{{ ParentData.sixPo }}</div>
            </template>
            <el-select v-model="FormData.useType" placeholder="请选择" style="width: 233px;" clearable>
              <el-option v-for="(item, index) in this.$store.state.PublicData.useType" :key="index" :label="item" :value="index" />
            </el-select>
          </el-form-item>
          <!-- 8 -->
          <el-form-item prop="personName">
            <template>
              <div class="text required">{{ ParentData.eightPo }}</div>
              <el-input v-model="FormData.personName" placeholder="请输入" style="width: 233px;" />
            </template>
          </el-form-item>
          <!-- 9 -->
          <el-form-item prop="phone">
            <template>
              <div class="text">{{ ParentData.ninePo }}</div>
              <el-input v-model="FormData.phone" placeholder="请输入" style="width: 233px;" />
            </template>
          </el-form-item>
          <!-- 6 -->
          <el-form-item prop="status">
            <template>
              <div class="text required">{{ ParentData.sevenPo }}</div>
              <el-radio v-model="FormData.status" label="1">启用</el-radio>
              <el-radio v-model="FormData.status" label="0">停用</el-radio>
            </template>
          </el-form-item>
          <!-- 按钮 -->
        </el-form>
        <div class="FormBtn">
          <el-button type="warning" style="background-color: #f8f5f5;" @click.native="Back">返回</el-button>
          <el-button type="warning" @click="Submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NewCode, GetAllWarehouseList, NewReservoir, QueryWarehouseArea, ModifyWarehouseArea } from '@/api'
import RouteData from '@/utils/RouteData'
export default {
  data() {
    return {
      // 编码
      core: '',
      ParentData: {},
      FormData: {},
      list: {},
      rules: {
        code: [
          { required: true, message: '请输入库区编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入所属仓库', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入库区名称', trigger: 'blur' }
        ],
        selectedOptions: [
          { required: true, message: '请输入温度类型', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入承重类型', trigger: 'blur' }
        ],
        surface: [
          { required: true, message: '请输入用途属性', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      async handler() {
        const res = await GetAllWarehouseList({ status: 1 })
        res.data.data.forEach((item) => {
          this.list[item.name] = item.id
        })
      }
    }
  },
  created() {
    this.$route.meta.title = '编辑库区'
    // 全量数据
    this.GetAllWarehouse()
    // 拿去路由数据渲染字段
    this.ParentData = RouteData(this.$route)
    // 编码
    this.NewCodeFn()
    if (this.$route.query.Id) {
      this.QueryWarehouseAreaFn()
    }
  },
  methods: {
    // 提交
    async Submit() {
      this.$refs.Form.validate(async(vala) => {
        if (vala) {
          try {
            let msg = ''
            if (this.$route.query.Id) {
              console.log(1)
              msg = await ModifyWarehouseArea(this.FormData)
            } else {
              console.log(2)
              msg = await NewReservoir(this.FormData)
            }
            if (msg.data.isSuccess) {
              this.$router.go(-1)
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$message({
                message: msg.data.msg,
                type: 'success'
              })
              return
            }
            if (msg.data.isError) {
              this.$message({
                message: msg.data.msg,
                type: 'warning'
              })
              return
            }
          } catch (err) {
            console.log(err)
          }
        }
      })
    },
    // 获取新编号
    async NewCodeFn() {
      const res = await NewCode('KQ')
      this.core = res.data.data
      this.FormData.code = this.core
    },
    // 拿取全量数据
    async GetAllWarehouse() {
      const res = await GetAllWarehouseList({ status: 1 })
      res.data.data.forEach((item) => {
        this.list[item.name] = item.id
      })
    },
    // 数据回显
    async QueryWarehouseAreaFn() {
      const res = await QueryWarehouseArea(this.$route.query.Id)
      this.FormData = res.data.data
    },
    // 返回
    Back() {
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    }
  }
}
</script>
